<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>弹性标签动画</title>
    <link rel="stylesheet" href="../../libs/font-awesome.min.css">
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div class="wrapper">
      <nav>
        <input type="radio" name="tab" id="home" checked />
        <input type="radio" name="tab" id="comment" />
        <input type="radio" name="tab" id="envelope" />
        <input type="radio" name="tab" id="heart" />
        <input type="radio" name="tab" id="user" />
        <label for="home" class="home" onclick="location.href='#';">
          <a><i class="fa fa-home" aria-hidden="true"></i>Home</a>
        </label>
        <label for="comment" class="comment" onclick="location.href='#';">
          <a><i class="fa fa-comment" aria-hidden="true"></i>Comment</a>
        </label>
        <label for="envelope" class="envelope" onclick="location.href='#';">
          <a><i class="fa fa-envelope" aria-hidden="true"></i>Envelope</a>
        </label>
        <label for="heart" class="heart" onclick="location.href='#';">
          <a><i class="fa fa-heart" aria-hidden="true"></i>Heart</a>
        </label>
        <label for="user" class="user" onclick="location.href='#';">
          <a><i class="fa fa-user" aria-hidden="true"></i>User</a>
        </label>
        <div class="tab"></div>
      </nav>
    </div>
  </body>
</html>
